<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        background-color: #f0f0f0;
      }

      svg {
        position: absolute;
      }
    </style>
  </head>

  <body>
    <svg width="120%" viewBox="0 0 1038 265" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- path用来当背景 -->
      <path
        d="M18 254C69.8805 169.477 234.119 25.787 476.031 127.215C717.942 228.643 941.473 95.3333 1023 16"
        stroke="lightgray"
        stroke-linecap="round"
        stroke-width="42"
        vector-effect="non-scaling-stroke"
      />
      <!-- 指定绘制对象时使用的矢量效果 -->
      <!--  non-scaling-stroke在缩放或变换元素时，保持笔画宽度不变 -->
      <path
        d="M18 254C69.8805 169.477 234.119 25.787 476.031 127.215C717.942 228.643 941.473 95.3333 1023 16"
        stroke="black"
        stroke-width="42"
        stroke-dasharray="200 1120"
        stroke-linecap="round"
        stroke-dashoffset="200"
        id="myPath"
        vector-effect="non-scaling-stroke"
      />

      <animate href="#myPath" attributeName="stroke-dashoffset" to="-1120" dur="3s" repeatCount="indefinite" />
    </svg>
  </body>
</html>
